<template>
	<yingbing-lyric
	ref="lyric"
	v-if="lyricConfigSync.mode != 'close' && instance"
	:isShow="lyricConfigSync.mode == 'overall'"
	:lyric="lyric"
	:fontColor="lyricConfigSync.fillColor"
	:strokeColor="lyricConfigSync.strokeColor"
	:fontSize="lyricConfigSync.fontSize"
	:verticalAlign="lyricConfigSync.verticalAlign"
	:offset="lyricConfigSync.offset"
	:title="title"
	:currentTime="currentTime"
	@lyricChange="lyricChange"></yingbing-lyric>
</template>
<script>
	import audioUtils from '../js_sdk/audioUtils.js'
	export default {
		props: {
			//播放链接
			src: {
				type: String,
				default: ''
			},
			//音频标题
			title: {
				type: String,
				default: ''
			},
			//音频封面
			poster: {
				type: String,
				default: ''
			},
			//歌词集合
			lyric: {
				type: Array,
				default () {
					return new Array
				}
			},
			//组件模式（inner | background）
			mode: {
				type: String,
				default: 'inner'
			},
			//音频播放模式 仅 mode 为inner且在app下有效
			playMode: {
				type: String,
				default: 'ambient'
			},
			//添加歌曲是否自动播放
			autoplay: {
				type: Boolean,
				default: false
			},
			//循环播放
			loop: {
				type: Boolean,
				default: false
			},
			//播放时长
			duration: {
				type: Number,
				default: 0
			},
			//播放倍率
			playbackRate: {
				type: Number,
				default: 1.0
			},
			//音量
			volume: {
				type: Number,
				default: 1
			},
			//播放开始位置
			initialTime: {
				type: Number,
				default: 0
			},
			//歌词配置
			lyricConfig: {
				type: Object,
				default () {
					return new Object
				}
			},
			//分享配置（mode为backgroud时有效）
			shareConfig: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		data () {
			return {
				instance: null,
				currentTime: 0
			}
		},
		computed: {
			lyricConfigSync () {
				return Object.assign({}, {
					mode: 'close', //歌词模式 close|hidden|overall 不计算也不显示全局歌词|隐藏全局歌词但计算歌词|计算并显示全局歌词
					fillColor: '#2ca2f9',//填充颜色
					strokeColor: '#333333',//描边颜色
					fontSize: uni.upx2px(35),//歌词大小
					fontFamily: 'Times New Roman',//歌词字体
					fontFace: '',//歌词字体路径 仅支持app端
					verticalAlign: 'bottom',//歌词上下定位 top|bottom 上|下
					offset: uni.upx2px(15)//歌词定位偏移量
				}, this.lyricConfig)
			},
			shareConfigSync () {
				return Object.assign({}, {
					shareUrl: '',//分享链接,
					albumName: '',//分享专辑名称
					singer: ''//分享歌手名
				}, this.shareConfig)
			}
		},
		created() {
			if ( this.src ) this.init()
		},
		beforeDestroy() {
			this.destroy()
		},
		methods: {
			//初始化音乐
			init () {
				this.destroy()
				if ( this.mode == 'background' ) {
					this.instance = audioUtils.initContext()
					this.instance.title = this.title
					this.instance.coverImgUrl = this.poster
					this.instance.epname = this.shareConfig.albumName
					this.instance.singer = this.shareConfig.singer
					this.instance.webUrl = this.shareConfig.shareUrl
					this.instance.onPrev(() => { this.$emit('prev') })
					this.instance.onNext(() => { this.$emit('next') })
				} else {
					this.instance = uni.createInnerAudioContext()
					this.instance.sessionCategory = this.playMode
					this.instance.volume = this.volume
					this.instance.loop = this.loop
					this.instance.autoplay = this.autoplay
					this.instance.onSeeking(this.onseeking.bind(this))
					this.instance.onSeeked(this.onseeked.bind(this))
				}
				this.instance.playbackRate = this.playbackRate
				this.instance.startTime = this.initialTime
				this.instance.onCanplay(this.oncanplay.bind(this))
				this.instance.onPlay(this.onplay.bind(this))
				this.instance.onPause(this.onpause.bind(this))
				this.instance.onStop(this.onstop.bind(this))
				this.instance.onEnded(this.onended.bind(this))
				this.instance.onError(this.onerr.bind(this))
				this.instance.onTimeUpdate(this.ontimeupdate.bind(this))
				this.instance.onWaiting(this.onwating.bind(this))
				this.instance.src = this.src
			},
			oncanplay () {
				if ( !this.instance ) { return }
				this.$emit('canplay', {
					duration: this.duration || this.instance.duration
				})
				if ( this.mode == 'background' ) {
					if ( this.autoplay ) { this.play() }
					else { this.pause() }
				}
			},
			onplay () {
				this.$emit('play')
			},
			onpause () {
				this.$emit('pause')
			},
			onstop () {
				this.$emit('stop')
			},
			onended () {
				this.$emit('ended')
				if ( this.mode == 'background' ) this.seek(0)
			},
			onerr () {
				this.$emit('error')
			},
			ontimeupdate () {
				if ( !this.instance ) { return }
				this.currentTime = this.instance.currentTime
				this.$emit('timeUpdate', {
					currentTime: this.currentTime
				})
				if ( this.duration > 0 && this.currentTime >= this.duration ) {
					if ( this.loop ) { this.seek(0) }
					else { this.pause() }
				}
			},
			onseeking () {
				if ( !this.instance ) { return }
				this.$emit('seeking', {
					currentTime: this.instance.currentTime
				})
			},
			onseeked () {
				if ( !this.instance ) { return }
				this.$emit('seeked', {
					currentTime: this.instance.currentTime
				})
			},
			onwating () {
				this.$emit('waiting')
			},
			toggle () {
				if ( !this.instance ) { return }
				if ( this.instance.paused ) { this.instance.play() }
				else { this.instance.pause() }
			},
			//播放音乐
			play () {
				this.instance && this.instance.play() 
			},
			//暂停音乐
			pause () {
				this.instance && this.instance.pause()
			},
			//停止音乐
			stop () {
				this.instance && this.instance.stop()
			},
			destroy () {
				if ( !this.instance ) return
				if ( this.mode == 'background' ) {
					this.instance.pause()
					this.instance.stop()
					this.instance = null
				} else {
					// #ifdef MP-WEIXIN || MP-ALIPAY || MP-BAIDU || MP-TOUTIAO
					this.instance.offCanplay(this.oncanplay.bind(this))
					this.instance.offPlay(this.onplay.bind(this))
					this.instance.offPause(this.onpause.bind(this))
					this.instance.offStop(this.onstop.bind(this))
					this.instance.offEnded(this.onended.bind(this))
					this.instance.offError(this.onerr.bind(this))
					this.instance.offTimeUpdate(this.ontimeupdate.bind(this))
					this.instance.offSeeking(this.onseeking.bind(this))
					this.instance.offSeeked(this.onseeked.bind(this))
					this.instance.offWaiting(this.onwating.bind(this))
					// #endif
					this.instance.stop()
					this.instance.destroy()
					this.instance = null
				}
				this.$refs.lyric && this.$refs.lyric.destroyLyric()
			},
			//跳转播放位置
			seek (seconds) {
				this.instance && this.instance.seek(seconds)
			},
			lyricChange (e) {
				this.$emit('lyricChange', e)
			}
		},
		watch: {
			src (newVal) {
				if ( newVal ) { this.init() }
				else { this.destroy() }
			},
			title (newVal) {
				 if ( this.mode == 'background' && this.instance ) this.instance.title = newVal
			},
			poster (newVal) {
				 if ( this.mode == 'background' && this.instance ) this.instance.coverImgUrl = newVal
			},
			shareConfigSync (newVal) {
				if ( this.mode == 'background' && this.instance ) {
					this.instance.epname = newVal.albumName
					this.instance.singer = newVal.singer
					this.instance.webUrl = newVal.shareUrl
				}
			},
			loop (newVal) {
				if ( this.mode == 'inner' && this.instance ) this.instance.loop = newVal
			},
			playMode (newVal) {
				if ( this.mode == 'inner' && this.instance ) this.instance.sessionCategory = newVal
			},
			volume (newVal) {
				if ( this.mode == 'inner' && this.instance ) this.instance.volume = newVal
			},
			playbackRate ( newVal ) {
				if (this.instance) this.instance.playbackRate = newVal
			},
			initialTime ( newVal ) {
				if (this.instance) this.instance.startTime = newVal
			}
		}
	}
</script>
<style>
</style>
